<template>
	<div class="container">
		<!-- 筛选区域 -->
		<div class="filter-area">
			<!-- 标签筛选 -->
			<div class="filter-row">
				<div class="tags-container">
					<button v-for="tag in tags" :key="tag.id" @click="toggleTag(tag)"
						:class="{ 'tag-active': selectedTags.includes(tag.id) }" class="tag-button">
						{{ tag.name }}
					</button>
				</div>
				<el-button class="more-tags" @click="showallTabs = true">
					更多标签
					<i class="el-icon-arrow-down"></i>
				</el-button>
			</div>

			<!-- 时间筛选和搜索 -->
			<div class="filter-row second-row">
				<el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期" class="date-picker"></el-date-picker>
				<div class="search-container">
					<el-input v-model="searchText" prefix-icon="el-icon-search" placeholder="搜索产品名称"
						class="search-input">
					</el-input>
					<el-button type="primary" @click="search()" style="margin-left: 30px;">搜索</el-button>
				</div>
			</div>
		</div>

		<!-- 卡片列表 -->
		<div class="card-list">
			<div v-for="product in products" :key="product.id" class="product-card">
				<h3 class="product-title">{{ product.productName }}</h3>

				<div class="tags-wrapper">
					<span class="product-tag" :style="{ backgroundColor: '#8B5CF6' }">
						{{ product.productSellingPoint }}
					</span>
					<span class="product-tag" :style="{ backgroundColor: '#F59E0B' }">
						{{ product.targetAudience }}
					</span>

				</div>

				<!-- <div class="tags-wrapper" v-if="product.tags">
          <span 
            v-for="(tag, index) in product.tags.slice(0, 3)" 
            :key="index"
            :style="{ backgroundColor: tag.bgColor }"
            class="product-tag"
          >
            {{ tag.name }}
          </span>
          <span v-if="product.tags.length > 3" class="more-tags-count">
            +{{ product.tags.length - 3 }}
          </span>
        </div> -->

				<div class="card-footer">
					<span class="create-time">
						创建于 {{ formatDate(product.createDate) }}
					</span>
					<div class="action-buttons">
						<el-button type="primary" class="action-btn" @click="tolist(product.id)">进入</el-button>
						<el-button class="action-btn" @click="showEditCard = true">编辑</el-button>
						<el-button type="danger" class="action-btn" @click="handleDelete(product)">删除</el-button>
					</div>
				</div>
			</div>
		</div>



		<!-- 所有标签弹窗 -->
		<el-dialog title="所有标签" :visible.sync="showallTabs" width="30%" :before-close="handleClose">
			<div class="all-tabs-box">
				<button v-for="tag in tags" :key="tag.id" @click="toggleTag(tag)"
					:class="{ 'tag-active': selectedTags.includes(tag.id) }" class="tag-button">
					{{ tag.name }}
				</button>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="showallTabs = false">取 消</el-button>
				<el-button type="primary" @click="showallTabs = false">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 编辑卡片弹窗 -->
		<el-dialog title="编辑卡片" :visible.sync="showEditCard" width="30%" :before-close="handleClose">
			<div class="edit-main">
				编辑卡片
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="showEditCard = false">取 消</el-button>
				<el-button type="primary" @click="showEditCard = false">确 定</el-button>
			</span>
		</el-dialog>





	</div>
</template>

<script>
	export default {
		data() {
			return {
				tags: [{
						id: 1,
						name: '电子产品',
						bgColor: '#3B82F6'
					},
					{
						id: 2,
						name: '家居用品',
						bgColor: '#10B981'
					},
					{
						id: 3,
						name: '食品饮料',
						bgColor: '#F59E0B'
					},
					{
						id: 4,
						name: '服装配饰',
						bgColor: '#EF4444'
					},
					{
						id: 5,
						name: '美妆护肤',
						bgColor: '#EF4444'
					},
					{
						id: 6,
						name: '母婴用品',
						bgColor: '#EF4444'
					},
					{
						id: 7,
						name: '美妆护肤',
						bgColor: '#EF4444'
					},
					{
						id: 8,
						name: '母婴用品',
						bgColor: '#EF4444'
					},
				],
				products: [{
					id: 1,
					name: '华为 Mate 60 Pro 旗舰手机',
					tags: [{
							name: '电子产品',
							bgColor: '#3B82F6'
						},
						{
							name: '手机',
							bgColor: '#10B981'
						},
						{
							name: '新品',
							bgColor: '#F59E0B'
						},
						{
							name: '热销',
							bgColor: '#EF4444'
						}
					],
					createTime: '2024-01-15'
				}, ],
				// 控制显示所有标签
				showallTabs: false,
				// 控制显示编辑卡片
				showEditCard: false,
				selectedTags: [],
				dateRange: null,
				searchText: ''
			}
		},
		computed: {
			filteredProducts() {
				let result = [...this.products];

				if (this.selectedTags.length > 0) {
					result = result.filter(product =>
						product.tags.some(tag =>
							this.selectedTags.includes(this.tags.find(t => t.name === tag.name)?.id || 0)
						)
					);
				}

				if (this.dateRange && this.dateRange.length === 2) {
					const [startDate, endDate] = this.dateRange;
					result = result.filter(product => {
						const productDate = new Date(product.createTime);
						return productDate >= startDate && productDate <= endDate;
					});
				}

				if (this.searchText) {
					const searchLower = this.searchText.toLowerCase();
					result = result.filter(product =>
						product.name.toLowerCase().includes(searchLower)
					);
				}

				return result;
			}
		},
		mounted() {
			this.loadData()
		},
		methods: {
			loadData() {
				let data = {

				}
				this.$http.post("/cards/loadManyByPramas", data).then(res => {
					console.log(res)
					this.products = res.data
					console.log(this.products)
				})
			},
			toggleTag(tag) {
				const index = this.selectedTags.indexOf(tag.id);
				if (index === -1) {
					this.selectedTags.push(tag.id);
				} else {
					this.selectedTags.splice(index, 1);
				}
			},
			formatDate(date) {
				return new Date(date).toLocaleDateString('zh-CN', {
					year: 'numeric',
					month: 'long',
					day: 'numeric'
				});
			},
			handleDelete(product) {
				this.$confirm(`确定要删除产品"${product.name}"吗？`, '删除确认', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.products = this.products.filter(p => p.id !== product.id);
				}).catch(() => {});
			},
			tolist(e) {
				// 跳转界面至文本列表
				this.$router.push({
					path: 'liebiao',
					query: {
						id: e
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #f9fafb;
		padding: 2rem;
	}

	.filter-area {
		background: white;
		border-radius: 0.5rem;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		padding: 1.5rem;
		margin-bottom: 1.5rem;
	}

	.filter-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 1rem;
	}

	.second-row {
		margin-bottom: 0;
	}

	.tags-container {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		flex-grow: 1;
		margin-right: 1rem;
	}

	.tag-button {
		padding: 0.5rem 1rem;
		font-size: 0.875rem;
		border-radius: 0.375rem;
		border: 1px solid #e5e7eb;
		background: white;
		cursor: pointer;
		white-space: nowrap;
	}

	.tag-button:hover {
		background-color: #f3f4f6;
	}

	.tag-active {
		background-color: #dbeafe;
		color: #2563eb;
	}

	.more-tags {
		white-space: nowrap;
	}

	.date-picker {
		width: 320px;
	}

	.search-container {
		position: relative;
	}

	.search-input {
		width: 280px;
	}

	.card-list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}

	.product-card {
		background: white;
		border-radius: 0.5rem;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		padding: 1.5rem;
		transition: all 0.3s;
	}

	.product-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

	.product-title {
		font-size: 1.125rem;
		font-weight: bold;
		margin-bottom: 0.75rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.tags-wrapper {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin-bottom: 0.5rem;
		cursor: pointer;
	}

	.product-tag {
		padding: 0.4rem 0.75rem;
		font-size: 0.75rem;
		border-radius: 9999px;
		color: white;
		/* 添加这行 */
		line-height: 1;
		text-align: center;
	}

	.more-tags-count {
		font-size: 0.75rem;
		color: #6b7280;
		padding: 0.25rem 0;
	}

	.card-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.create-time {
		font-size: 0.875rem;
		color: #6b7280;
	}

	.action-buttons {
		display: flex;
		gap: 0.5rem;
	}

	.action-btn {
		border-radius: 0.375rem;
		white-space: nowrap;
	}

	/* 覆盖Element UI样式 */
	.el-input__inner {
		border-radius: 0.375rem !important;
	}

	.el-date-editor.el-input {
		width: 320px;
	}

	.all-tabs-box {
		width: 100%;
		height: 290px;
		/* 固定高度以产生换列效果 */
		border-radius: 10px;
		padding: 10px;
		background-color: #f1f1f1;
		overflow-y: scroll;
		display: flex;

		/* flex-direction: column; */
		/* 改为垂直方向 */
		flex-wrap: wrap;
		/* 允许换列 */
		align-content: flex-start;
		/* 内容从左侧开始排列 */
		gap: 8px;
		/* 可选：标签间距 */
	}

	.edit-main {
		width: 100%;
		min-height: 290px;
		height: auto;
	}
</style>